<%--
  活动详情页面
  功能：展示单个活动的详细信息及审核状态
  版本：1.0
  日期：2023-07-20
--%>

<%-- JSP指令 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%> <%-- 设置页面编码并启用EL表达式 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- 引入JSTL核心标签库 --%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%-- 引入JSTL格式化标签库 --%>

<!DOCTYPE html>
<html>
<head>
    <title>活动详情</title>
    <%-- 引入Bootstrap CSS --%>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <%-- 页面自定义样式 --%>
    <style>
        /* 活动详情卡片样式 */
        .activity-detail {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-top: 20px;
        }

        /* 活动封面图片样式 */
        .activity-cover {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        /* 详情标签样式 */
        .detail-label {
            font-weight: 600;
            color: #495057;
        }

        /* 返回按钮样式 */
        .back-btn {
            margin-top: 20px;
        }
    </style>
</head>
<body class="bg-light">
<div class="container">
    <%-- 活动详情卡片 --%>
    <div class="activity-detail">
        <%-- 活动标题 --%>
        <h2 class="mb-4">${activity.title}</h2>

        <%-- 活动封面图片（如果有） --%>
        <c:if test="${not empty activity.coverImage}">
            <img src="${activity.coverImage}" alt="活动封面" class="activity-cover">
        </c:if>

        <%-- 活动描述 --%>
        <div class="mb-4">
            <h5 class="detail-label">活动描述</h5>
            <p>${activity.description}</p>
        </div>

        <%-- 活动详细信息 --%>
        <div class="row mb-3">
            <div class="col-md-6">
                <%-- 开始时间 --%>
                <p><span class="detail-label">开始时间:</span>
                    <fmt:formatDate value="${activity.startTime}" pattern="yyyy-MM-dd HH:mm"/></p>
            </div>

            <%-- 结束时间 --%>
            <p><span class="detail-label">结束时间:</span>
                <fmt:formatDate value="${activity.endTime}" pattern="yyyy-MM-dd HH:mm"/></p>

            <%-- 活动地点 --%>
            <p><span class="detail-label">地点:</span> ${activity.location}</p>

            <div class="col-md-6">
                <%-- 审核状态 --%>
                <c:choose>
                    <%-- 已审核情况 --%>
                    <c:when test="${not empty activityReviews && !empty activityReviews[0]}">
                        <p><span class="detail-label">审核状态:</span>
                            <span class="badge ${activityReviews[0].reviewStatus == 'approved' ? 'bg-success' : 'bg-danger'}">
                                    ${activityReviews[0].reviewStatus == 'approved' ? '通过' : '拒绝'}
                            </span>
                        </p>
                    </c:when>
                    <%-- 未审核情况 --%>
                    <c:otherwise>
                        <p><span class="detail-label">审核状态:</span>
                            <span class="badge bg-secondary">未审核</span>
                        </p>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>

        <%-- 返回按钮 --%>
        <a href="/volunteer/activityreview" class="btn btn-secondary back-btn">
            <i class="bi bi-arrow-left"></i> 返回审核列表
        </a>
    </div>
</div>
</body>
</html>